<template>
    <section>
        <a-button class="mr20" type="primary" @click="showryglpop">新增</a-button>
        <template>
            <a-modal
                :visible="ryvisible"
                :footer="null"
                okText="确认"
                @cancel="rycolse"
                :maskClosable="false"
            >
                <a-form-model
                    ref="ryruleForm"
                    v-if="ryvisible"
                    layout="vertical"
                    :rules="ryrules"
                    :model="userInfoDpt"
                >
                    <a-form-model-item label="职位" prop="personPostName">
                        <a-input v-model="userInfoDpt.personPostName" />
                    </a-form-model-item>
                    <a-form-model-item label="职位编码" prop="personPostCode">
                        <a-input v-model="userInfoDpt.personPostCode" />
                    </a-form-model-item>
                    <a-form-model-item label="姓名" prop="userRealName">
                        <a-input v-model="userInfoDpt.userRealName" />
                    </a-form-model-item>
                    <a-form-model-item label="电话" prop="userMobile">
                        <a-input v-model="userInfoDpt.userMobile" />
                    </a-form-model-item>
                    <a-form-model-item label="所属部门" prop="personOrgCode">
                        <a-cascader
                            :options="ddttreeData"
                            change-on-select
                            :fieldNames="ddtfieldNames"
                            @change="ryaddonChange"
                            placeholder="所属部门"
                        />
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button
                            type="primary"
                            class="fr"
                            @click="handleDptUserSave"
                            >保存</a-button
                        >
                        <a-button class="fr mr20" @click="rycolse"
                            >取消</a-button
                        >
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </template>
    </section>
</template>
<script>
export default {
    props: {
        ryvisible: {
            type: Boolean,
            default: true,
        },
        updateUserId: {
            type: String,
            default: "",
        },
        userInfoDpt: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            //人员管理
            ddtfieldNames: {
                label: "dptName",
                value: "dptCode",
                children: "subDptList",
            },
            treeData: [],
            ddttreeData: [],

            // 人员管理列表
            dptList: [],
            ryrules: {
                personPostName: {
                    required: true,
                    message: "职位不能为空",
                },
                personPostCode: {
                    required: true,
                    message: "职位编码不能为空",
                },
                userRealName: {
                    required: true,
                    message: "姓名不能为空",
                },
                userMobile: {
                    required: true,
                    message: "电话不能为空",
                },
                userEmail: {
                    required: true,
                    message: "邮箱不能为空",
                },

                personOrgCode: {
                    required: true,
                    message: "所属部门不能为空",
                },
            },
        };
    },
    mounted() {
        //调度台管理

        // this.getDptList();
        //管理员管理
        //人员管理
        // this.getOwerDptList();
    },
    methods: {
        showryglpop() {
            this.$emit('showryglpop')
            // this.ryvisible = true;
        },
        getDptList() {
            this.ddttreeData = [];
            //  1保安 2警察  9 所有
            this.$post("/exter/manage/getDptList", {
                paramVar: 9,
            }).then((result) => {
                this.ddttreeData.push(result.buss[0]);
            });
        },

        //人员管理
        ryaddonChange(value, selectedOptions) {
            this.userInfoDpt.personOrgCode = value[value.length - 1];
            // this.userInfoDpt.personOrgCodeAll = value;
            this.userInfoDpt.personOrgName =
                selectedOptions[selectedOptions.length - 1].dptName;
        },

        // 新增或者修改部门人员信息
        handleDptUserSave() {
            this.$refs["ryruleForm"].validate((valid) => {
                if (valid) {
                    // 更新还是新增
                    if (this.updateUserId) {
                        this.userInfoDpt.addFlag = 0;
                    } else {
                        this.userInfoDpt.addFlag = 1;
                    }

                    this.$post(
                        "/exter/manage/changeUserDptInfo",
                        this.userInfoDpt
                    ).then((result) => {
                        console.log(result);
                        // this.ryvisible = false;
                        this.$emit("handleDptUserSave");
                    });
                }
            });
        },

        rycolse() {
            this.$emit("rycolse");
        },

        digui(list) {
            list.title = list.dptName;
            list.children = list.subDptList;
            list.key = list.dptName;
            list.scopedSlots = { title: "title" };
            if (list.subDptList.length > 0) {
                list.subDptList.forEach((element) => {
                    element.title = element.dptName;
                    element.children = element.subDptList;
                    element.key = element.dptName;
                    element.scopedSlots = { title: "title" };
                    this.digui(element);
                });
            }
        },
    },
};
</script>

<style scoped lang='less'>
.index-info {
    color: white;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 40px;
    margin: 0 auto;
    background: #0a2d67;
    > div {
        width: 100%;
    }

    //人员管理
    .ry,
    .ddt {
        .permission-left {
            float: left;
            width: 15%;
            height: 80vh;
            overflow: auto;
            background: #1d4292;
            font-size: 14px;
            h4 {
                margin-top: 10px;
                background: #0c356d;
                height: 35px;
                line-height: 35px;
                padding-left: 10px;
                color: #fff;
            }
            .search-wz {
                position: relative;
            }
            .renyuan-dpt-list {
                li {
                    margin: 6px 0;
                    padding: 4px 0;
                    padding-left: 20px;
                }
                li:hover {
                    background: #2ce0ef;
                    cursor: pointer;
                }
                .actived {
                    background: #2ce0ef;
                }
            }
        }
        .permission-right {
            float: right;
            width: 84%;
            height: 80vh;
            overflow: auto;
            background: #1d4292;

            .permission-info {
                float: left;
                margin: 15px 10px 15px 15px;
                padding: 20px;
                background: #3258e9;
                width: 280px;
                border-radius: 10px;
                .name {
                    float: left;
                    width: 50%;
                    word-wrap: break-word;
                }
                .touxiang {
                    width: 40%;
                    float: right;
                    img {
                        margin: 0 auto;
                        display: block;
                    }
                    p {
                        margin-top: 5px;
                        text-align: center;
                    }
                }
                .but1 {
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>